<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	<style>
		/* 隐藏横向滚动条 */
		.layui-table-body {
			overflow-x: hidden !important;
		}
	</style>
</head>
<body class="pear-container">
<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-row">
				<div class="layui-col-xs3 layui-col-sm6 layui-col-md3">
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">课程名称</div>
							<input type="text" name="name" placeholder="请输入岗位名称" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
					<div class="layui-form-item">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
							<i class="layui-icon layui-icon-search"></i>查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>重置
						</button>
					</div>
				</div>

			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="data-table" lay-filter="data-table-filter"></table>
	</div>
</div>

<script type="text/html" id="toolbarLeftTpl">
	<button class="pear-btn pear-btn-md pear-btn-primary" lay-event="add">新增课程</button>
</script>
<script type="text/html" id="operationTpl">
	<a href="javascript:void(0);" lay-event="addChapter" class="operation-link primary-link">新增章节</a>
	<a href="javascript:void(0);" lay-event="edit" class="operation-link primary-link">修改</a>
	<a href="javascript:void(0);" lay-event="delete" class="operation-link delete-link">删除</a>
</script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
	layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict'], function() {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let layer = layui.layer;
		let admin = layui.admin;
		let dict = layui.dict;


		let cols = [[
			{ type: 'checkbox', hide: true },
			{ field: '', title: '', width: 10, align: 'right', templet: function(d) {
					return `<i style="cursor: pointer;" class="layui-icon layui-icon-triangle-r main-color main-cursor showOrHide" data-index=${d.LAY_INDEX + 1}></i>`;
				}
			},
			{ field: 'name', title: '课程名称', width: 250 },
			{ field: 'sort', title: '排序号', width: 80, align: 'center' },
			{ field: 'status', title: '状态', width: 150, align: 'center', event: 'disabled', templet: function(d) {
					return dict.labelStatus('common_status', d.status, true);
				}
			},
			{ field: 'remark', title: '备注', width: 200, align: 'center' },
			{ field: 'createTime', title: '创建时间', width: 180, align: 'center', templet: function (d) {
					return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
				}
			},
			{ field: 'operation', title: '操作', align: 'center', toolbar: '#operationTpl' }
		]];

		table.render({
			elem: '#data-table',
			url: '/crm/course/page',
			request: {
				pageName: 'pageNo',
				limitName: 'pageSize'
			},
			parseData: function(res) {
				let total = !$.vtl.isBlank(res.data)? res.data.total : 0;
				let list = !$.vtl.isBlank(res.data)? res.data.list : [];
				return {
					"code": 0,
					"msg": 'SUCCESS',
					"count": total,
					"data": list
				};
			},
			done: function (res, curr, count) {
				let tabData = res.data || [];
				// 向每一行tr后面追加显示子table的tr
				let trEles = $("#data-table").next(".layui-table-view").find("tbody tr");

				for (let i = 0; i < trEles.length; i++) {
					let childTr = `<tr class="childTR${i+1}" style="display:none;background: #ffffff">
                      <td colspan="7">
                        <div class="child-table-item" style="margin-bottom: 10px;">
                          <table id="childTable${i + 1}"></table>
                        </div>
                      </td>

                    </tr>`;
					$(trEles[i]).after(childTr);
				}
				// 渲染表格
				for (let i = 0; i < trEles.length; i++) {
					if(!$.vtl.isBlank(tabData[i])){
						renderChildTable(i, tabData[i].id,tabData[i].name);
					}
				}
			},
			page: true,
			cols: cols,
			skin: 'line',
			toolbar: '#toolbarLeftTpl',
			defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
		});

		// 渲染子表格
		function renderChildTable(index, parentId,courseName) {
			table.render({
				elem: '#childTable'+ (index + 1),
				url: "/crm/course/chapter/page", //数据接口
				where: {parentId:parentId},
				page: true, //开启分页
				cols: [[

					{field: 'name', title: '章节名称'},
					{field: 'sort', title: '排序'},
					{ field: 'operation', title: '操作', align: 'center', templet: function(d) {
							let oper = "<a href='javascript:void(0);' onclick='editChapter(" + index + ", \"" + d.id + "\", \"" + parentId + "\", \"" + courseName + "\")' class='operation-link primary-link'>修改</a>";
							oper += "<a href='javascript:void(0);' onclick='deleteChapter(" + index + ", \"" + d.id + "\")' class='operation-link delete-link'>删除</a>";
							return oper;
						}
					}

				]],
				request: {
					pageName: 'pageNo',
					limitName: 'pageSize'
				},
				parseData: function(res) {
					let total = !$.vtl.isBlank(res.data)? res.data.total : 0;
					let list = !$.vtl.isBlank(res.data)? res.data.list : [];
					return {
						"code": 0,
						"msg": 'SUCCESS',
						"count": total,
						"data": list
					};
				}
			});
		}

		// 点击箭头显示/隐藏子表格
		$(document).on('click', '.showOrHide', function () {
			let index = $(this).data("index");
			let classStr = $(this).attr("class");

			if (classStr.indexOf("layui-icon-triangle-r") > -1) {
				// 显示
				$(this).removeClass("layui-icon-triangle-r").addClass("layui-icon-triangle-d");
				$(`.childTR${index}`).show();
			} else {
				// 隐藏
				$(this).removeClass("layui-icon-triangle-d").addClass("layui-icon-triangle-r");
				$(`.childTR${index}`).hide();
			}
		});


		table.on('toolbar(data-table-filter)', function(obj) {
			if (obj.event === 'add') {
				window.edit();
			} else if (obj.event === 'refresh') {
				window.refresh(true);
			}
		});

		table.on('tool(data-table-filter)', function(obj) {
			console.log(obj)
			let row = obj.data;
			switch (obj.event) {
				case 'edit':
					window.edit(row.id);
					break;
				case 'delete':
					window.delete(obj);
					break;
				case 'addChapter':
					window.addChapter(obj);
					break;
				default:
					break;
			}
		});

		form.on('submit(data-table-query-filter)', function(data) {
			window.refresh(data.field);
			return false;
		});

		window.refresh = function(field = {}, deep = false) {
			$.vtl.tableReloadData('data-table', field, deep);
		}

		window.edit = function(id) {
			let url = 'courseEdit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
			$.vtl.openLayer(url, { title: $.vtl.isBlank(id) ?'新增':'编辑' });
		}

		window.delete = function(obj) {
			layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				$.delete('/crm/course/delete?id=' + obj.data.id, function(result) {
					if (result.code == 0) {
						window.refresh(true);
					}
				});
			});
		}
		window.setDisabledValue = function(obj) {
			layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				obj.data.status=obj.data.status===0?1:0
				$.put('/system/post/update', JSON.stringify(obj.data), function(result) {
					if (result.code == 0) {
						dict.refresh();
						window.refresh(true);
					}
				});
			});
			window.refresh(true);
		}

		window.refreshChapter = function(index) {
			$.vtl.tableReloadData('childTable'+ (Number(index) +1), {}, false);
		}

		window.addChapter = function(obj) {
			let url = 'courseChapterEdit.html?index='+obj.index+'&parentId=' + obj.data.id+'&courseName='+obj.data.name;
			$.vtl.openLayer(url, { title: '新增章节'});
		}

		window.editChapter = function (i,id,parentId,courseName){
			let url = 'courseChapterEdit.html?id='+id+'&index='+i+'&parentId=' + parentId+'&courseName='+courseName;
			$.vtl.openLayer(url, { title: '编辑章节'});
		}

		window.deleteChapter = function (i,id){
			layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				$.delete('/crm/course/chapter/delete?id=' + id, function(result) {
					if (result.code == 0) {
						window.refreshChapter(i);
					}
				});
			});
		}

	})
</script>
</body>
</html>
